<!--
 * @Author: sunli
 * @Date: 2021-12-27 23:02:43
 * @LastEditTime: 2022-06-28 22:19:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/Overlay/demo.vue
-->
<script setup>
import Overlay from '../../../packages/overlay/index.vue'
import {ref} from 'vue'

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const position = ref('bottom')
const showMask = ref(true)
const title = ref('')

const bottom = () => {
  visible1.value = true
  position.value = 'bottom'
  title.value = '标题'
}
const top = () => {
  visible2.value = true
  position.value = 'top'
  title.value = ''
}
const left = () => {
  visible3.value = true
  position.value = 'left'
  title.value = ''
}
const right = () => {
  visible4.value = true
  position.value = 'right'
  title.value = ''
}
</script>

<template>
  <div>
    <button class="z" @click="bottom">default</button>
    <button @click="top">top</button>
    <button @click="left">left</button>
    <button @click="right">right</button>
    <Overlay v-model:show="visible1" :position="position" :showMask="showMask" :title="title">
      <div class="bottom" >
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Overlay>
    <Overlay v-model:show="visible2" :position="position" :showMask="showMask" :title="title">
      <div class="top" >
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Overlay>
    <Overlay v-model:show="visible3" :position="position" :showMask="showMask" :title="title">
      <div class="left" >
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Overlay>
    <Overlay v-model:show="visible4" :position="position" :showMask="showMask" :title="title">
      <div class="right" style="width:200px">
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Overlay>
  </div>
</template>

<style scoped>
.z {
  z-index: 100;
}
.bottom {
  /* height: 100%; */
  width: 100%;
  background-color: red;
}
.top {
  /* height: 100%; */
  width: 100%;
  background-color: red;
}
.left {
  height: 100%;
  width: 20%;
  background-color: red;
}
.right {
  height: 100%;
  width: 20%;
  background-color: red;
}
</style>
